<template>
  <div class="officeaccount-box">
    <div class="officeaccount-box-tag" />
    <span class="officeaccount-title">公众号设置</span>
    <div class="officeaccount-horizontal" />
    <span class="officeaccount-overview-text">样式：</span>
    <div class="officeaccount-image">
      <el-image :src="require('@/assets/office_account_settting_overview.png')">
        <div slot="placeholder" class="image-slot">
          加载中<span class="dot">...</span>
        </div>
      </el-image>
    </div>

    <div class="officeaccount-button-horizontal" />
    <el-button class="submit-button" type="primary" :loading="submitLoading" @click="updateLiveReq">提交</el-button>

    <div class="choice-box">
      <div class="display-switch">
        <span class="title-span-style">显示开关：</span>
        <el-switch
          v-model="displayData.IsEnableOfficeAccount"
          :active-color="switchData.active_color"
          :inactive-color="switchData.inactive_color"
          :active-value="switchData.active_value"
          :inactive-value="switchData.inactive_value"
        />
      </div>

      <div class="add-online-user-base">
        <span class="title-span-style">公众号名称：</span>
        <el-input
          v-model="displayData.OfficeAccountName"
          class="elinput-style"
          placeholder="请输入内容"
          :maxlength="inputMaxLimit"
        />
        <span class="change-online-policy-unit">{{ inputTotal }}/{{ inputMaxLimit }}</span>
      </div>

      <div class="upload-qrcode-box">
        <span class="title-span-style">上传二维码：</span>
        <el-upload
          class="upload-demo"
          :action="fileUploadAddr"
          :limit="uploadLimitFile"
          :on-exceed="handleExceed"
          :file-list="displayData.qrCOdeFileList"
          :headers="fileUploadHeaders"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
        >
          <el-button size="small" type="primary">点击上传</el-button>
        </el-upload>
      </div>

    </div>
    <span class="img-desc-text">图片大小5M以内，支持PNG、JPG、JPEG格式</span>

    <div class="button-text">
      <span>注：</span>
      <div>
        <p>
          开启公众号后，以防您的观众关注公众号后无法回到<br>
          直播间请您自行在公众号发布相应直播间链接。<br>
        </p>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { updateLive, getUploadFile } from '@/api/lives'

export default {
  data() {
    return {
      submitLoading: false,
      fileUploadAddr: '',
      fileDisplayAddr: '',
      fileUploadHeaders: {
        Authorization: ''
      },
      uploadLimitFile: 1,
      inputTotal: 0,
      inputMaxLimit: 20,
      switchData: {
        inactive_value: false,
        active_value: true,
        active_color: '#13ce66',
        inactive_color: '#ff4949'
      },
      displayData: {
        IsEnableOfficeAccount: true,
        OfficeAccountName: '',
        OfficeAccountQRCodeImage: '',
        qrCOdeFileList: []

      },
      updateLiveData: {
        IsEnableOfficeAccount: null,
        OfficeAccountName: null,
        OfficeAccountQRCodeImage: null
      }
    }
  },
  computed: {
    ...mapGetters([
      'choicedLive',
      'token'
    ])
  },
  watch: {
    'choicedLive'(n, o) {
      this.initOrChanged(n)
    },
    'token'(n, o) {
      this.fileUploadHeaders.Authorization = this.token
    }
  },
  mounted() {
    // 获取图片的地址
    this.fileUploadHeaders.Authorization = this.token
    this.fileUploadAddr = process.env.VUE_APP_BASE_API + '/api/v1/files'
    this.initOrChanged(this.choicedLive)
  },
  methods: {
    handleExceed(ev) {
      this.$message.error(`公众号名称最大不能超过${this.inputMaxLimit}个字符`)
    },
    initOrChanged(d) {
      if (d.id) {
        this.displayData.IsEnableOfficeAccount = d.IsEnableOfficeAccount || true
        this.displayData.OfficeAccountName = d.OfficeAccountName || ''
        this.inputTotal = this.displayData.OfficeAccountName.length
        if (d.OfficeAccountQRCodeImage) {
          var fileArray = d.OfficeAccountQRCodeImage.split('/')
          var f_id = fileArray[fileArray.length - 1]
          getUploadFile(f_id).then((res) => {
            if (res.code === 200) {
              this.displayData.qrCOdeFileList = [{
                name: res.data.data.FileName,
                url: res.data.data.AccessAddress
              }]
            }
          })
        }
      }
    },
    handleAvatarSuccess(res, file) {
      // this.fileUploadAddr = URL.createObjectURL(file.raw)
      if (res.code === 200) {
        this.displayData.qrCOdeFileList = [{
          name: res.data[0].FileName,
          url: res.data[0].AccessAddress
        }]
        this.updateLiveData.OfficeAccountQRCodeImage = res.data[0].AccessAddress
      }
    },
    beforeAvatarUpload(file) {
      // const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 5

      // if (!isJPG) {
      //   this.$message.error('上传头像图片只能是 JPG 格式!')
      // }
      if (!isLt2M) {
        this.$message.error('上传图片大小不能超过 5MB!')
      }
      // return isJPG && isLt2M
      return isLt2M
    },
    // 更新直播请求
    updateLiveReq() {
      this.submitLoading = true
      this.updateLiveData.IsEnableOfficeAccount = this.displayData.IsEnableOfficeAccount
      this.updateLiveData.OfficeAccountName = this.displayData.OfficeAccountName
      updateLive(this.updateLiveData, this.choicedLive.id).then((res) => {
        if (res.code === 200) {
          this.$message({
            message: '保存成功',
            type: 'success'
          })
        }
      })
      this.submitLoading = false
    }
  }
}
</script>

<style lang="scss" scoped>
.officeaccount-box {
    width: 1627px;
    height: 770px;
    background: #FFFFFF;
    border-radius: 10px;
    position: absolute;
    top: 13px;
    left: 260px;
}
.officeaccount-box-tag {
    width: 4px;
    height: 28px;
    background: #2E9BEA;
    border-radius: 2px;
    position: absolute;
    top: 25px;
    }
.officeaccount-horizontal {
    width: 1514px;
    height: 4px;
    background: #EDF5FB;
    position: absolute;
    top: 85px;
}
.officeaccount-overview-text {
    width: auto;
    height: 20px;
    font-size: 20px;
    font-family: PingFang SC;
    font-weight: 400;
    color: #6D7A8E;
    position: absolute;
    top: 139px;
    left: 849px;
}

.officeaccount-image {
  display: flex;
  position: absolute;
  align-items: center;
  top: 196px;
  left: 849px;
  width: 461px;
  height: 374px;
  ::v-deep {
      .el-image__inner {
          width: 461px;
          height: 374px;
      }
  }
}
.officeaccount-button-horizontal {
    width: 1514px;
    height: 4px;
    background: #EDF5FB;
    position: absolute;
    top: 645px;
}
.submit-button {
    width: 159px;
    height: 50px;
    background: #2E9BEA;
    border-radius: 10px;
    position: absolute;
    top: 687px;
    left: 659px;
::v-deep {
  span {
    width: 46px;
    height: 20px;
    font-size: 20px;
    font-family: PingFang SC;
    font-weight: 400;
    color: #FFFFFF;
  }
  }
}
.add-online-user {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    width: auto;
    height: 40px;
}
.button-text {
    display: flex;
    position: absolute;
    top: 366px;
    left: 193px;
    ::v-deep{
    span,p {
        width: auto;
        height: auto;
        font-size: 18px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #A7B5CB;
        line-height: 2rem;
    }
    }
}
.elinput-style {
    width: auto;
    height: auto;
    border: 1px solid #AFBDD2;
    border-radius: 10px;
    ::v-deep {
        .el-input__inner,elinput-style,el-input,el-input--medium {
                width: 235px;
                height: 40px;
                border: 1px solid #AFBDD2;
                border-radius: 10px;
                border: 0px;
                display: flex;
                align-items: center;
        }
        span {
            width: 8px;
            height: 11px;
            font-size: 18px;
            font-family: PingFang SC;
            font-weight: 400;
            color: #606772;
        }
    }
}

.choice-box {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    position: absolute;
    left: 75px;
    top: 143px;
    height: 180px;
    width: auto;
    .title-span-style {
        width: auto;
        height: auto;
        font-size: 18px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #6D7A8E;
        margin-right: 20px;
    }
    .display-switch {
        display: flex;
        align-items: center;
        flex-wrap: nowrap;
        width: auto;
        height: 21px;
    }
    .change-online-policy-unit {
        width: auto;
        height: auto;
        font-size: 18px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #A3B3CE;
        margin-left: 10px;
    }
}
.upload-qrcode-box {
    display: flex;
    align-items: center;
}
.img-desc-text {
    width: auto;
    height: auto;
    font-size: 18px;
    font-family: PingFang SC;
    font-weight: 400;
    color: #A7B5CB;
    position: absolute;
    top: 335px;
    left: 193px;
}
.officeaccount-title {
    width: 145px;
    height: 23px;
    font-size: 24px;
    font-family: PingFang SC;
    font-weight: 400;
    color: #4A5462;
    position: absolute;
    top: 31px;
    left: 55px;
}
</style>
